<template>
	<div style="height: 100%;">
		<!-- 经典布局 -->
	  <a-layout v-if="contor" id="components-layout-demo-side" style="min-height: 100vh">
		<a-layout-sider style="position: fixed;top: 0;bottom: 0;" :class="[Set_Pre.styleSetVal.cssstyle]" v-model="collapsed" collapsible>
		  <div :class="['logo',Set_Pre.styleSetVal.cssstyle]"> {{!collapsed ? 'Ant 演示站' : 'Ant'}} </div>
		  <a-menu :theme="Set_Pre.styleSetVal.meunStyle" :defaultOpenKeys="['1']" @openChange="onOpenChange" :selectedKeys="defaultkeys" :openKeys="openKey" mode="inline" @click='GoRouter'>
			<template v-for="item in Menu">
				<a-menu-item v-if="!item.children" :key="item.key" :dataitem="item" :ref="item.key">
					<a-icon :type="item.icon" />
					<span>{{ item.name }}</span>
				</a-menu-item>
				<sub-menu v-else :key="item.key" :menu-info="item" />
			</template>
		  </a-menu>
		</a-layout-sider>
		<a-layout :class="[Set_Pre.styleSetVal.bg_style]" :style="collapsed ? 'margin-left: 80px;':'margin-left: 200px;'">
		  <a-layout-header :class="[Set_Pre.styleSetVal.conten_style, 'a-layout-header']">
			  <div>
				  <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="() => (collapsed = !collapsed)" />
			  </div>
				<div class="a-dropdown-div">
					<a-dropdown placement="bottomCenter">
						<div>
							<span class="userTx"><img src="../img/Tx.png"></span>
							<span class="userName">admin</span>
						</div>
						<a-menu slot="overlay" @click="perFun">
							<a-menu-item key="1">
								<div class="AmenuTtem"><a-icon type="user" /><span>个人中心</span></div>
							</a-menu-item>
							<a-menu-item key="2">
								<div class="AmenuTtem"><a-icon type="setting" /><span>个人设置</span></div>
							</a-menu-item>
							<a-menu-item key="3" style="border-top: 1px solid #D5D5D5;">
								<div class="AmenuTtem"><a-icon type="poweroff" /><span>退出登录</span></div>
							</a-menu-item>
						</a-menu>
					  </a-dropdown>
				</div>
			</a-layout-header>
			<a-breadcrumb v-show="Set_Pre.crumbval" style="padding: 9px 0px 16px 16px;background: white;">
			  <a-breadcrumb-item>首页</a-breadcrumb-item>
			  <a-breadcrumb-item v-for="(item,ind) in Crumbs" :key="ind">
				  <a @click="funCrumb(item)">{{item.name}}</a>
			  </a-breadcrumb-item>
			</a-breadcrumb>
			<div class="anTtabs" v-show="Set_Pre.Tabsval">
				<div class="center">
					<a-tabs v-model="activeKey" @tabClick="subTabs" hide-add type="editable-card" @edit="onTabsEdit">
					  <a-tab-pane :closable="item.closable" :key="item.key" v-for="(item) in tabs">
						<span slot="tab">
						  {{item.name}}
						  <a-icon v-if="activeKey === item.key" @click="rever" style="margin-left: 5px;" type="redo" />
						</span>
					  </a-tab-pane>
					</a-tabs>
				</div>
				<div class="right">
					<div class="left">
						<a-button type="link"><a-icon type="small-dash" /> </a-button>
					</div>
				</div>
			</div>
		  <a-layout-content>
			<div :class="[Set_Pre.styleSetVal.conten_style]" :style="{ minHeight: '360px' }">
			  <router-view></router-view>
			</div>
		  </a-layout-content>
		  <a-layout-footer :class="[Set_Pre.styleSetVal.bg_style]" style="text-align: center">
			Ant Study ©2021 Created by longMaoXiaoGe
		  </a-layout-footer>
		</a-layout>
	  </a-layout>
	  <!-- 经典布局 -->
	  <!-- 经典TOP顶部布局 -->
  <!-- components-layout-demo-top -->
  <!-- components-layout-demo-fixed -->
  <a-layout :class="[Set_Pre.styleSetVal.bg_style]" v-if="!contor" id="components-layout-demo-top" class="layout">
	  <!-- :style="{ position: 'fixed', zIndex: 1, width: '100%' }" -->
      <a-layout-header :class="[Set_Pre.styleSetVal.cssstyle]" style="padding: 0 20px">
        <div class="logo">{{!collapsed ? 'Ant 演示站' : 'Ant'}}</div>
		<div class="a-dropdown-div" style="float: right;color: white;">
			<a-dropdown placement="bottomCenter">
				<div>
					<span class="userTx"><img src="../img/Tx.png"></span>
					<span class="userName">admin</span>
				</div>
				<a-menu slot="overlay" @click="perFun">
					<a-menu-item key="1">
						<div class="AmenuTtem"><a-icon type="user" /><span>个人中心</span></div>
					</a-menu-item>
					<a-menu-item key="2">
						<div class="AmenuTtem"><a-icon type="setting" /><span>个人设置</span></div>
					</a-menu-item>
					<a-menu-item key="3" style="border-top: 1px solid #D5D5D5;">
						<div class="AmenuTtem"><a-icon type="poweroff" /><span>退出登录</span></div>
					</a-menu-item>
				</a-menu>
			  </a-dropdown>
		</div>
		<a-menu style="margin-left: 150px;" :theme="Set_Pre.styleSetVal.meunStyle" :defaultOpenKeys="['1']" @openChange="onOpenChange" :selectedKeys="defaultkeys" :openKeys="openKey" mode="horizontal" @click='GoRouter'>
			<template v-for="item in Menu">
				<a-menu-item v-if="!item.children" :key="item.key" :dataitem="item" :ref="item.key">
					<a-icon :type="item.icon" />
					<span>{{ item.name }}</span>
				</a-menu-item>
				<sub-menu v-else :key="item.key" :menu-info="item" />
			</template>
		</a-menu>
      </a-layout-header>
      <a-layout-content style="padding: 0 20px">
        <a-breadcrumb v-show="Set_Pre.crumbval" :class="[Set_Pre.styleSetVal.bg_style !== '' ? 'dark_breadcrumb' : '' ]" style="margin: 16px 0;">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item v-for="(item,ind) in Crumbs" :key="ind">
			<a @click="funCrumb(item)">{{item.name}}</a>
          </a-breadcrumb-item>
        </a-breadcrumb>
		<div v-show="!Set_Pre.crumbval" :style="Set_Pre.Tabsval ? 'height: 13px;' : 'height: 53px;'"></div>
		<div class="anTtabs" v-show="Set_Pre.Tabsval">
			<div class="center">
				<a-tabs v-model="activeKey" @tabClick="subTabs" hide-add type="editable-card" @edit="onTabsEdit">
				  <a-tab-pane :closable="item.closable" :key="item.key" v-for="(item) in tabs">
					<span slot="tab">
					  {{item.name}}
					  <a-icon v-if="activeKey === item.key" @click="rever" style="margin-left: 5px;" type="redo" />
					</span>
				  </a-tab-pane>
				</a-tabs>
			</div>
			<div class="right">
				<div class="left">
					<a-button type="link"><a-icon type="small-dash" /> </a-button>
				</div>
			</div>
		</div>
        <div :class="[Set_Pre.styleSetVal.conten_style]" :style="{ minHeight: '280px' }">
          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer :class="[Set_Pre.styleSetVal.bg_style]" style="text-align: center">
        Ant Study ©2021 Created by longMaoXiaoGe
      </a-layout-footer>
    </a-layout>
	<!-- 经典TOP顶部布局 -->
	<!-- 设置按钮 -->
	<div class="setting" v-show="!showDrawerval">
		<a-button type="primary" @click="showDrawer" icon="setting" size="large" />
	</div>
	<!-- 设置按钮 -->
	<a-drawer placement="right" :closable="false" :visible="showDrawerval"
	 @close="onClose" >
	 <div :class="[Set_Pre.styleSetVal.conten_style]" style="padding: 24px; height: 100%;">
		 	 <div class="setting2" @click="onClose" v-show="showDrawerval">
		 <a-button type="primary" @click="onClose" icon="close" size="large" />
	 </div>
	 <div>
		 <h3>整体风格设置</h3>
		 <div class="style_check">
			 <div v-for="(item,ind) in Set_Pre.styleSet" :key="ind" :class="item.className" @click="checkstyleSet(item)">
			 	<span class="qr" v-if="item.id === Set_Pre.styleSetVal.id"><a-icon type="check" /></span>
			 </div>
		 </div>
		 <div class="ant-divider-horizontal"></div>
	 </div>
	 <div>
		 <h3>导航模式</h3>
		 <div class="style_check">
			<div v-for="(item,ind) in Set_Pre.nagSet" :key="ind" :class="item.className" @click="checknagSet(item)">
				<span class="qr" v-if="item.id === Set_Pre.nagSetVal.id"><a-icon type="check" /></span>
			</div>
		 </div>
		 <div class="ant-divider-horizontal"></div>
	 </div>
	 <div>
		 <h3>主题模式</h3>
		 <div class="colorstyle">
			<div class="colorbox" v-for="(item,ind) in Set_Pre.colorStyle" :key="ind" @click="checkColor(item,1)">
				<div class="colorlump" :style="'background: '+item.color+';'"></div>
				<span>{{item.name}}</span>
			</div>
		 </div>
		 <div class="ant-divider-horizontal"></div>
	 </div>
	 <div>
		<h3>其他设置</h3>
		<div class="elseSet">
			<div>面包屑</div>
			<div><a-switch size="small" v-model="Set_Pre.crumbval"/></div>
		</div>
		<div class="elseSet">
			<div>多标签</div>
			<div><a-switch size="small" v-model="Set_Pre.Tabsval"/></div>
		</div>
	 </div>
	</div>
	</a-drawer>
	</div>
</template>
<script>
import SubMenu from '@/components/submeun.vue'
import { findfun,findtab} from '../utils/fun.js'
export default {
	data() {
    return {
		collapsed: false, //菜单收缩
		contor:'123', //布局转换
		showDrawerval:false, //抽屉设置
		Set_Pre:{ //设置参数
			'styleSet':[  //整体风格样式
				{'id':'123','className':'style_check_light','meunStyle':'light','cssstyle':'set_light','conten_style':'','bg_style':'','bg_style':''},
				{'id':'1231','className':'style_check_dark','meunStyle':'dark','cssstyle':'set_dark','conten_style':'','bg_style':'','bg_style':''},
				{'id':'1232','className':'style_check_realDark','meunStyle':'dark','cssstyle':'set_dark','conten_style':'set_dark_cen','bg_style':'set_dark_bg'},
			],
			'styleSetVal':{'id':'1231','className':'style_check_dark','meunStyle':'dark','cssstyle':'set_dark','conten_style':'','bg_style':'','bg_style':''},
			'nagSet':[ //导航风格样式
				{'id':'123','className':'style_check_dark',type:true},
				{'id':'1231','className':'style_check_dark2',type:false},
			],
			'nagSetVal':{'id':'123','className':'style_check_dark',type:true},
			'colorStyle':[{'name':'默认','color':'#177ddc'},{'name':'夏日绿','color':'#41FF11'},{'name':'少女粉','color':'#ED89ED'},{'name':'极致黑','color':'#0F020F'}],
			'crumbval':false,
			'Tabsval':false
		},
		Menu:[],
		Crumbs:[{key: '1',parentID:'0',name:'工作台',children:null,path:'/workplace',icon:'history'}],
		defaultkeys:['1'],
		openKey:[],
		tabs:[{key: '1',component:'workplace',parentID:'0',name:'工作台',children:null,path:'/workplace',icon:'history',closable: false}],
		activeKey: '1'
	};
	},
	watch:{
		'$route' : 'getPath'
	},
	components: {
		"sub-menu": SubMenu
	},
	created(){
		this.Menu = this.$store.state.menu
		let nagSetVal = JSON.parse(sessionStorage.getItem('nagSetVal'))
		let styleSetVal = JSON.parse(sessionStorage.getItem('styleSetVal'))
		let meunkeys = JSON.parse(sessionStorage.getItem('meunkeys'))
		let tabs = JSON.parse(sessionStorage.getItem('tabs'))
		this.Set_Pre.nagSetVal = nagSetVal ? nagSetVal : this.Set_Pre.nagSetVal
		this.Set_Pre.styleSetVal = styleSetVal ? styleSetVal : this.Set_Pre.styleSetVal
		this.contor = this.Set_Pre.nagSetVal.type
		this.defaultkeys = [meunkeys.defaultkeys]
		this.openKey = meunkeys.openKey
		this.tabs = tabs
		let isbring = this.tabs.find( t => t.component === this.$route.name)
		this.activeKey = isbring.key
	},
	mounted() {
	},
	methods: {
		GoRouter(e){ //点击路由菜单
			let i = e.key
			let arri =  [e.keyPath[e.keyPath.length - 1]]
			console.log(arri)
			let obj = this.$refs[i][0].$attrs.dataitem
			this.$router.push(obj.path)
			this.Crumbs = findfun(obj,this.Menu).reverse()
			let mobj = { 'defaultkeys': i,'openKey': arri}
			sessionStorage.setItem("meunkeys", JSON.stringify(mobj))
			this.defaultkeys = [i]
			this.openKey =arri
		},
		onOpenChange(openKeys){ //打开菜单
			this.openKey = openKeys
		},
		showDrawer(){ //打开设置抽屉
			this.showDrawerval = true
		},
		onClose(){ //关闭设置抽屉
			this.showDrawerval = false
		},
		checknagSet(item){ //导航样式选择
			this.Set_Pre.nagSetVal = item
			sessionStorage.setItem("nagSetVal", JSON.stringify(item)) //解决刷新后页面参数重置问题
			this.contor = item.type
		},
		checkstyleSet(item){ //整体风格设置
			this.Set_Pre.styleSetVal = item
			sessionStorage.setItem("styleSetVal", JSON.stringify(item))
		},
		checkColor(item,n){ //主题模式设置
			window.less.modifyVars({
				"@primary-color": item.color,
			})
		},
		perFun({ key }){ //个人菜单
			if(key === '3'){
				this.$router.push('/')
			}
		},
		funCrumb(e){ //面包屑函数
			if(e.parentID === '0'){
				if(e.children.length){
					this.$router.push(e.children[0].path)
					this.$set(this.defaultkeys,0,e.children[0].key) //$set可以触发更新视图
					this.Crumbs = find(e.children[0],this.Menu).reverse()
				}
			}
		},
		rever(){
			this.$router.push('/refresh')
		},
		getPath(){
			let obj = findtab(this.$route.name,this.Menu)
			let isbring = this.tabs.find( t => t.name === obj.name)
			// if(isbring){
			// 	this.activeKey = isbring.key
			// }
			// if(isbring === undefined && this.$route.name !== 'refresh'){
			// 	this.tabs.push(obj)
			// }
			// sessionStorage.setItem("tabs", JSON.stringify(this.tabs))
			console.log(this.tabs)
		},
		subTabs(key){
			let isbring = this.tabs.find( t => t.key === key)
			this.Crumbs = findfun(isbring,this.Menu).reverse()
			this.$router.push(isbring.path)
			this.defaultkeys = [key]
			this.openKey = [isbring.parentID]
		},
		onTabsEdit(targetKey, action){
			let isbring = this.tabs.findIndex( t => t.key === targetKey)
			let obj = this.tabs[isbring - 1]
			this.defaultkeys = [obj.key]
			// this.openKey = [obj.parentID]
			this.$router.push(obj.path)
			this.Crumbs = findfun(obj,this.Menu).reverse()
			console.log(isbring)
			console.log(obj)
			this.tabs.splice(isbring, 1)
		}
	}
};
</script>

<style lang="less" scoped>
.userName{
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
}
.userTx{
	width: 24px;
	height: 24px;
	line-height: 24px;
	border-radius: 50%;
	margin-right: 6px;
	display: inline-block;
	img{
		width: 100%;
		height: 100%;
	}
}
.a-dropdown-div{
	margin-right: 16px;
}
.a-layout-header{
	background: #fff; 
	padding: 0;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #F2F3F4;
}
#components-layout-demo-side .logo {
	height: 32px;
	background: rgba(255, 255, 255, 0.2);
	margin: 16px;
	text-align: center;
	font-size: 15px;
	color: white;
	line-height: 32px;
}
#components-layout-demo-top .logo {
	width: 120px;
	height: 31px;
	background: rgba(255, 255, 255, 0.2);
	margin-top: 10px;
	float: left;
	text-align: center;
	font-size: 15px;
	color: white;
	line-height: 31px;
}
#components-layout-demo-fixed .logo {
	width: 120px;
	height: 31px;
	background: rgba(255, 255, 255, 0.2);
	margin-top: 10px;
	float: left;
	text-align: center;
	font-size: 15px;
	color: white;
	line-height: 31px;
}
.trigger {
	font-size: 18px;
	line-height: 50px;
	padding: 0 24px;
	cursor: pointer;
	transition: color 0.3s;
}
.AmenuTtem{
	display: flex;
	justify-content: center;
	align-items: center;
	span{
		box-sizing: border-box;
		padding: 0 10px;
	}
}
.logo1{
	float: right;
}
.setting{
    position: fixed;
    top: 35%;
    right: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 16px;
	color: white;
    text-align: center;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    pointer-events: auto
}
.setting2{
    position: fixed;
    top: 35%;
    right: 256px;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 16px;
	color: white;
    text-align: center;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    pointer-events: auto
}
.qr{
	position: absolute;
	right: 12%;
	bottom: 3%;
	font-size: 16px;
	color: #1890ff;
}
.style_check{
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 20px 0;
	div{
		position: relative;
		width: 44px;
		height: 36px;
		margin-right: 16px;
		overflow: hidden;
		background-color: #f0f2f5;
		border-radius: 4px;
		box-shadow: 0px 1px 2.5px 0px #D5D5D5;
		cursor: pointer;
	}
	div:before{
		position: absolute;
	    top: 0;
	    left: 0;
	    width: 33%;
	    height: 100%;
	    background-color: #fff;
	    content: "";
	}
	div:after{
		position: absolute;
		top: 0;
		left: 33%;
		width: 100%;
		height: 25%;
		background-color: #fff;
		content: "";
	}
	.style_check_light:before {
	    background-color: #fff;
	    content: "";
	}
	.style_check_light:after {
	    background-color: #fff;
	    content: "";
	}
	.style_check_dark:before{
		background-color: #001529;
		content: "";
	}
	.style_check_realDark{
		background-color:rgba(0,21,41,.65);
	}
	.style_check_realDark:before{
		background-color: #001529;
		content: "";
	}
	.style_check_realDark:after {
	    background-color: #001529;
	    content: "";
	}
	.style_check_dark2:after {
	    background-color: #001529;
	    content: "";
	}
	.style_check_dark2:before {
	    background-color: #001529;
		width: 33%;
		height: 26%;
	    content: "";
	}
}
.ant-divider-horizontal{
	display: block;
	clear: both;
	width: 100%;
	min-width: 100%;
	height: 1px;
	margin: 24px 0;
	background-color: #D5D5D5;
}
.colorstyle{
	font-size: 12px;
	display: flex;
	justify-content: space-around;
	align-content: center;
	.colorbox{
		display: flex;
		justify-content: center;
		align-content: center;
		flex-direction: column;
		cursor: pointer;
		.colorlump{
			width: 35px;
			height: 35px;
			border-radius: 8px;
		}
		span{
			margin-top: 2px;
			text-align: center;
		}
	}
}
.elseSet{
	display: flex;
	justify-content: space-between;
	margin: 20px 0 10px 0;
}
.anTtabs{
	display: flex;
	background-color: white;
	height: 40px;
	margin-top: 1px;
	.left{
		width: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		color: #CCCCCC;
		border-right: 1px solid #EEEEEE;
	}
	.center{
		width: calc(100% - 40px);
	}
	.right{
		div{
			border-left: 1px solid #EEEEEE;
		}
	}
}
</style>
